<template>
  <div class="address-page" id="addressDiv">
    <div class="fade" @click="cancelAdd"></div>
    <div class="address-group">
      <div class="title">新建收货地址<em class="close" @click.stop="cancelAdd"></em></div>
      <div class="item-list">
        <div class="item flex flex-pack-justify">
          <label>收货人</label>
          <input placeholder="请输入收货人姓名" class="flex-1" v-model="form.contactor">
        </div>
        <div class="item flex flex-pack-justify">
          <label>联系电话</label>
          <input placeholder="请输入联系电话" class="flex-1" v-model="form.phone">
        </div>
        <div class="item flex flex-pack-justify">
          <label>所在地</label>
          <div class="flex-1 address-select" @click="isShow=true">
            <span v-if="!provinceName">请选择所在地</span>
            <span>{{provinceName}}&nbsp;&nbsp;{{cityName}}</span>
          </div>
          <i class="icon icon-arrowdown"></i>
        </div>
        <div class="item flex flex-pack-justify">
          <label>详细地址</label>
          <input placeholder="请输入详细地址" class="flex-1" v-model="form.address">
        </div>
      </div>
      <div class="notice">
        <span v-show="notice"><i class="icon icon-selected1"></i>{{notice}}</span>
      </div>
      <div class="save flex flex-pack-justify">
        <div class="btn" @click="cancelAdd">取消</div>
        <div class="btn btn1" @click="save">保存</div>
      </div>
    </div>
    <changeAddress v-show="isShow" :provinceId="form.provinceId" :cityId="form.cityId" :provinceName="provinceName"></changeAddress>
  </div>
</template>
<script>
  import changeAddress from './changeAddress.vue'
  let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
  export default {
    props: {},
    data() {
      return {
        isShow:false,
        notice: '',
        cityName: '',
        provinceName: '',
        form: {
          address: '',
          cityId: '',
          contactor: '',
          phone: '',
          provinceId: ''
        },
      };
    },
    methods: {
//        保存地址
        save(){
          if(this.verify()){
            addAddress(this.form).then(data=>{
                if(data.returnCode == '000000'){
                    Toast(data.result);
                    this.cancelAdd();
//                    window.history.back();
                }
            })
          }
        },
        cancelAdd(){
            this.$parent.isShowAddr=false;
            this.isShow=false;
            this.notice= '';
            this.cityName='';
            this.provinceName= '';
            this.form= {
              address: '',
              cityId: '',
              contactor: '',
              phone: '',
              provinceId: ''
            }
        },
        verify(){
            if(this.form.contactor == ''){
              this.notice = '收货人姓名不能为空';
              return false;
            }
            if(!reg.test(this.form.phone)){
              this.notice = '输入正确的手机号码';
              return false;
            }
            if(!this.form.cityId || !this.form.provinceId){
                this.notice = '请选择所在地';
                return false;
            }
            this.notice = '';
            return true;
        }
    },
    filters: {},
    created() {
    },
    mounted(){
    },
    components: {
        changeAddress
    }
  };
</script>
<style lang="less">
  @import "../goods/detail.less";
  #addressDiv.address-page .address-group {
    padding: 0rem;
    background: #fff;
    .title{
      width: 100%;
      height: .88rem;
      line-height: .88rem;
      background: #F3F6F9;
      text-align: center;
      font-size: .28rem;
      color: #333333;
    }
    .item-list{
      padding: 0px .7rem;
    }
    .save{
      .btn{
        margin: 0px;
        background: #E8EDF2;
        font-size: .28rem;
        color: #666;
      }
      .btn1{
        background: #FF4A4A;
      }
    }
    .notice{
      text-align: left;
      padding-left: 2.2rem;
      font-size: .24rem;
      color: #ff4a4a;
      i{
        margin-right: .08rem;
      }
    }

  }

</style>
